<template>
  <!--列表 轮播图-->
  <div class="list-container">
    <div class="sortList clearfix">
      <div class="center">
        <!--banner轮播 组件封装之后-->
        <Carousel :list="bannerList"></Carousel>
      </div>
      <div class="right">
        <div class="news">
          <h4>
            <em class="fl">尚品汇快报</em>
            <span class="fr tip">更多 ></span>
          </h4>
          <div class="clearix"></div>
          <ul class="news-list unstyled">
            <li><span class="bold">[特惠]</span>备战开学季 全民半价购数码</li>
            <li><span class="bold">[公告]</span>备战开学季 全民半价购数码</li>
            <li><span class="bold">[特惠]</span>备战开学季 全民半价购数码</li>
            <li><span class="bold">[公告]</span>备战开学季 全民半价购数码</li>
            <li><span class="bold">[特惠]</span>备战开学季 全民半价购数码</li>
          </ul>
        </div>
        <ul class="lifeservices">
          <li class="life-item">
            <i class="list-item"></i>
            <span class="service-intro">话费</span>
          </li>
          <li class="life-item">
            <i class="list-item"></i>
            <span class="service-intro">机票</span>
          </li>
          <li class="life-item">
            <i class="list-item"></i>
            <span class="service-intro">电影票</span>
          </li>
          <li class="life-item">
            <i class="list-item"></i>
            <span class="service-intro">游戏</span>
          </li>
          <li class="life-item">
            <i class="list-item"></i>
            <span class="service-intro">彩票</span>
          </li>
          <li class="life-item">
            <i class="list-item"></i>
            <span class="service-intro">加油站</span>
          </li>
          <li class="life-item">
            <i class="list-item"></i>
            <span class="service-intro">酒店</span>
          </li>
          <li class="life-item">
            <i class="list-item"></i>
            <span class="service-intro">火车票</span>
          </li>
          <li class="life-item">
            <i class="list-item"></i>
            <span class="service-intro">众筹</span>
          </li>
          <li class="life-item">
            <i class="list-item"></i>
            <span class="service-intro">理财</span>
          </li>
          <li class="life-item">
            <i class="list-item"></i>
            <span class="service-intro">礼品卡</span>
          </li>
          <li class="life-item">
            <i class="list-item"></i>
            <span class="service-intro">白条</span>
          </li>
        </ul>
        <div class="ads">
          <img src="./images/ad1.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
//引入swiper
// import Swiper from "swiper";
export default {
  name: "VueappSggIndex",

  data() {
    return {};
  },

  mounted() {
    //mounted：组件挂载完毕，而created，在数据渲染之前，页面还没有加载的时候
    //派发action，通过Vuex发起ajax请求，将数据存储在仓库中
    this.$store.dispatch("getBannerList");
    //在new Swpier实例之前，页面中结构必须的有【现在老师把new Swiper实例放在mounte这里发现不行】
    // 为什么那：结构还不完整
    //因为dispatch当中涉及到异步语句，导致v-for遍历的时候结构还没有完全因此不行
    //setTimeout延时器，对性能有要求
    // setTimeout(() => {
    //   var mySwiper = new Swiper(document.querySelector(".swiper-container"), {
    //     // direction: 'vertical', // 垂直切换选项

    //     loop: true, // 循环模式选项

    //     // 如果需要分页器
    //     pagination: {
    //       el: ".swiper-pagination",
    //       clickable: true, //点击小圆圈可以切换
    //     },

    //     // 如果需要前进后退按钮
    //     navigation: {
    //       nextEl: ".swiper-button-next",
    //       prevEl: ".swiper-button-prev",
    //     },
    //   });
    //   console.log(mySwiper);
    // }, 2000);
  },
  //computed 计算属性
  computed: {
    ...mapState({
      bannerList: (state) => state.home.bannerList,
    }),
  },
  methods: {},
  updated() {
    //只有data里的变量改变并且要在页面重新渲染完成之后,才会进updated生命周期，只改变data里的值但是没有再页面上渲染该值的话并不会触发updated方法。
  },
};
//轮播图组件前的代码
// <div class="swiper-container" ref="mySwiper">
//   <div class="swiper-wrapper">
//     <div
//       class="swiper-slide"
//       v-for="(item, index) in bannerList"
//       :key="index"
//     >
//       <img :src="item.imgUrl" />
//     </div>
//   </div>
//   <!-- 如果需要分页器 -->
//   <div class="swiper-pagination"></div>

//   <!-- 如果需要导航按钮 -->
//   <div class="swiper-button-prev"></div>
//   <div class="swiper-button-next"></div>
// </div>
//watch的原来代码
// watch: {
//   //监听bannerList数据的变化：因为这条数据发生过交化----由空数组交为数组里面有四个元素
//   bannerList: {
//     immediate: true,
//     handler(newValue, oldValue) {
//       console.log(newValue, oldValue);
//       //现在咱们通过watch监听bannerList展性的属性值的变化
//       //如果执行handler方法，代表组件实例身上这个展性的属性以己经有了【数组：四个元素】
//       //当前这个两数执行：只能保证bannerList数据己经有了，但是你没办法保证v-for已经执行结束了
//       //v-for执行完牛，才有结构【你现在在watch当中没办法保证的】
//       //nextTick：在下次DOM更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的DOM
//       this.$nextTick(() => {
//         //当你执行这个回调的时候，保证服务器数据回来了，v-for执行完毕，【轮播图结构一定有了】
//         var mySwiper = new Swiper(
//           // document.querySelector(".swiper-container"),
//           this.$refs.mySwiper, //vue中获取DOM节点
//           {
//             // direction: 'vertical', // 垂直切换选项

//             loop: true, // 循环模式选项

//             // 如果需要分页器
//             pagination: {
//               el: ".swiper-pagination",
//               clickable: true, //点击小圆圈可以切换
//             },

//             // 如果需要前进后退按钮
//             navigation: {
//               nextEl: ".swiper-button-next",
//               prevEl: ".swiper-button-prev",
//             },
//           }
//         );
//         console.log(mySwiper);
//       });
//     },
//   },
// },
</script>

<style lang="less" scoped>
.list-container {
  width: 1200px;
  margin: 0 auto;

  .sortList {
    height: 464px;
    padding-left: 210px;

    .center {
      box-sizing: border-box;
      width: 740px;
      height: 100%;
      padding: 5px;
      float: left;
    }

    .right {
      float: left;
      width: 250px;

      .news {
        border: 1px solid #e4e4e4;
        margin-top: 5px;

        h4 {
          border-bottom: 1px solid #e4e4e4;
          padding: 5px 10px;
          margin: 5px 5px 0;
          line-height: 22px;
          overflow: hidden;
          font-size: 14px;

          .fl {
            float: left;
          }

          .fr {
            float: right;
            font-size: 12px;
            font-weight: 400;
          }
        }

        .news-list {
          padding: 5px 15px;
          line-height: 26px;

          .bold {
            font-weight: 700;
          }
        }
      }

      .lifeservices {
        border-right: 1px solid #e4e4e4;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;

        .life-item {
          border-left: 1px solid #e4e4e4;
          border-bottom: 1px solid #e4e4e4;
          margin-right: -1px;
          height: 64px;
          text-align: center;
          position: relative;
          cursor: pointer;
          width: 25%;

          .list-item {
            background-image: url(./images/icons.png);
            width: 61px;
            height: 40px;
            display: block;
          }

          .service-intro {
            line-height: 22px;
            width: 60px;
            display: block;
          }

          &:nth-child(1) {
            .list-item {
              background-position: 0px -5px;
            }
          }

          &:nth-child(2) {
            .list-item {
              background-position: -62px -5px;
            }
          }

          &:nth-child(3) {
            .list-item {
              background-position: -126px -5px;
            }
          }

          &:nth-child(4) {
            .list-item {
              background-position: -190px -5px;
            }
          }

          &:nth-child(5) {
            .list-item {
              background-position: 0px -76px;
            }
          }

          &:nth-child(6) {
            .list-item {
              background-position: -62px -76px;
            }
          }

          &:nth-child(7) {
            .list-item {
              background-position: -126px -76px;
            }
          }

          &:nth-child(8) {
            .list-item {
              background-position: -190px -76px;
            }
          }

          &:nth-child(9) {
            .list-item {
              background-position: 0px -146px;
            }
          }

          &:nth-child(10) {
            .list-item {
              background-position: -62px -146px;
            }
          }

          &:nth-child(11) {
            .list-item {
              background-position: -126px -146px;
            }
          }

          &:nth-child(12) {
            .list-item {
              background-position: -190px -146px;
            }
          }
        }
      }

      .ads {
        margin-top: 5px;

        img {
          opacity: 0.8;
          transition: all 400ms;

          &:hover {
            opacity: 1;
          }
        }
      }
    }
  }
}
</style>
//第一步：引包(相应Js|css)
//第三步：页面中结构务必要有
//第三步(页面当中务必要有结构)：new Swiper实例【轮指图添加动态效果】